<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件机制</title>
    <style>
        div {
            padding: 5px;
            cursor: pointer;
        }
        #div1 {
            background-color: blueviolet;
        }
        #div2 {
            background-color: red;
        }
        #div3 {
            background-color: rosybrown;
        }
        p {
            padding: 10px;
        }
        span {
            display: inline-block;
            padding: 5px;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="div1">
        div1
        <div id="div2">
            div2
            <div id="div3">
                div3
            </div>
        </div>
    </div>
    <script>
        const $div1 = document.querySelector('#div1');
        const $div2 = document.querySelector('#div2');
        const $div3 = document.querySelector('#div3');
        // 1:捕获阶段 , 2:目标阶段 , 3: 冒泡阶段
        // div1 的捕获
        $div1.addEventListener('click', (e) => {
            console.log('div1 capturing:捕获', e.eventPhase, e.target, e.currentTarget);
        }, true);

        // div1 的冒泡
        $div1.addEventListener('click', (e) => {
            console.log('div1 bubbling:冒泡', e.eventPhase);
        }, false);

         // div2 的捕获
        $div2.addEventListener('click', (e) => {
            console.log('div2 capturing:捕获', e.eventPhase);
        }, true);
        // div2 的冒泡
        $div2.addEventListener('click', (e) => {
            console.log('div2 bubbling:冒泡', e.eventPhase);
        }, false);

          // div3 的冒泡
        $div3.addEventListener('click', (e) => {
            console.log('div3 bubbling:冒泡');
        }, false);

         // div3 的捕获
        $div3.addEventListener('click', (e) => {
            console.log('div3 capturing:捕获');
        }, true);

    </script>
</body>
</html>